<!--
 * @页面名称:桌面快捷方式
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card desktopShortcut">
    <el-space style="margin-bottom: 10px">
      <el-button type="primary" @click="add">新增</el-button>
    </el-space>
    <div style="height: calc(100% - 42px)">
      <stable :columns="tableSetting.tableColumn" :data="tableSetting.tableData"></stable>
    </div>
    <!-- 新增修改弹框 -->
    <modal v-model:visible="modalSetting.visible" :title="modalSetting.title" width="500" @ok="ok">
      <el-form ref="formInstance" :model="formData" :rules="rules" label-width="110px">
        <el-form-item label="顺序号:" prop="order">
          <el-input v-model="formData.order"></el-input>
        </el-form-item>
        <el-form-item label="快捷菜单名称:" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="快捷菜单路径:" prop="path">
          <el-tree-select
            v-model="formData.path"
            node-key="MNU_ID"
            :props="{ label: 'MNU_Title', children: 'children' }"
            :data="authStore.authMenuList"
            :render-after-expand="false"
          />
        </el-form-item>
        <el-form-item label="图标名称:" prop="iconName">
          <el-input v-model="formData.iconName"></el-input>
        </el-form-item>
        <el-form-item label="图标背景颜色:">
          <el-color-picker v-model="formData.iconColor" />
        </el-form-item>
        <el-form-item label="备注:">
          <el-input v-model="formData.remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
        </el-form-item>
      </el-form>
    </modal>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted, nextTick } from "vue";
import { useUserStore } from "@/stores/modules/user";
import { useAuthStore } from "@/stores/modules/auth";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// pinia数据
const userStore = useUserStore();
const authStore = useAuthStore();

// 表格格式化函数
const formatter = ({ row, column, cellValue }: any) => {
  if (column.property === "SC_RoutePath") {
    cellValue = authStore.newFlatMenuListGet.filter((v: any) => v.MNU_ID === cellValue)[0]?.MNU_Title;
  }
  if (column.property === "SC_U_ID") {
    cellValue =
      userStore.userList.filter((v: any) => v.U_ID === cellValue).length > 0
        ? userStore.userList.filter((v: any) => v.U_ID === cellValue)[0].U_Name
        : cellValue;
  }
  return cellValue;
};
// 表格设置
const tableSetting = reactive({
  // 表格数据
  tableData: [],
  // 表格列
  tableColumn: [
    { title: "顺序号", field: "SC_Order", sortable: true },
    { title: "快捷菜单名称", field: "SC_ShortCutName", sortable: true },
    { title: "快捷菜单路径", field: "SC_RoutePath", sortable: true, formatter: formatter },
    { title: "图标", field: "SC_BackgroundIcon", sortable: true },
    {
      title: "图标背景颜色",
      field: "SC_ShortCutColor",
      sortable: true,
      align: "center",
      slots: {
        default: ({ row }: any) => {
          return (
            <div
              style={{
                backgroundColor: row.SC_ShortCutColor,
                width: "20px",
                height: "20px",
                textAlign: "center",
                margin: "0 auto",
                borderRadius: " 2px"
              }}
            ></div>
          );
        }
      }
    },
    { title: "用户名", field: "SC_U_ID", sortable: true, formatter: formatter },
    { title: "备注", field: "SC_Remark", sortable: true },
    {
      title: "操作",
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [
            <el-space>
              <el-link underline={false} type="primary" onClick={() => edit(row)}>
                修改
              </el-link>
              <el-link underline={false} type="primary" onClick={() => del(row)}>
                删除
              </el-link>
            </el-space>
          ];
        }
      }
    }
  ],
  // 单击保存对象
  clickRowObj: {} as any
});
// 弹出框配置
const modalSetting = reactive({
  visible: false,
  title: ""
});
// 表单绑定字段
const formData = reactive({
  order: "",
  name: "",
  path: "",
  iconName: "",
  iconColor: "#409EFF",
  remark: ""
});
// 表单规则
const rules = reactive({
  order: [{ required: true, message: "请输入顺序号", trigger: "change" }],
  name: [{ required: true, message: "请输入菜单名称", trigger: "change" }],
  path: [{ required: true, message: "请输入菜单路径", trigger: "change" }],
  iconName: [{ required: true, message: "请输入图标名称", trigger: "change" }]
});
// 表单实例
const formInstance = ref();
// 获取快捷方式数据
const getData = () => {
  proxy.$vueAxios.get("Master_Base_ShortCut/Get", { order: "sC_Order asc" }).then((res: any) => {
    tableSetting.tableData = res.List;
  });
};
// 点击新增事件
const add = () => {
  modalSetting.visible = true;
  modalSetting.title = "新增";
  formInstance.value?.resetFields();
};
// 修改事件
const edit = (row: any) => {
  tableSetting.clickRowObj = row;
  modalSetting.visible = true;
  modalSetting.title = "修改";
  nextTick(() => {
    formData.order = row.SC_Order;
    formData.name = row.SC_ShortCutName;
    formData.path = row.SC_RoutePath;
    formData.iconColor = row.SC_ShortCutColor;
    formData.iconName = row.SC_BackgroundIcon;
    formData.remark = row.SC_Remark;
  });
};
// 删除事件
const del = (row: any) => {
  proxy
    .$confirm("您是否确认删除该数据?", "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_ShortCut/Delete", [row.SC_ID]).then((res: any) => {
        if (res.Mark) {
          tableSetting.tableData = tableSetting.tableData.filter((v: any) => v.SC_ID !== row.SC_ID);
          proxy.$message.success("删除成功");
        }
      });
    });
};
// 弹框确认事件
const ok = () => {
  formInstance.value.validate((valid: boolean) => {
    if (valid) {
      if (modalSetting.title === "新增") {
        const params = {
          sC_ID: proxy.$global.createID(),
          sC_U_ID: userStore.userInfo.U_ID,
          sC_Order: formData.order,
          sC_ShortCutName: formData.name,
          sC_ShortCutColor: formData.iconColor,
          sC_BackgroundIcon: formData.iconName,
          sC_Remark: formData.remark,
          sC_RoutePath: formData.path
        };
        proxy.$vueAxios.post("Master_Base_ShortCut", params).then((res: any) => {
          getData();
          modalSetting.visible = false;
        });
      } else if (modalSetting.title === "修改") {
        const params = {
          sC_ID: tableSetting.clickRowObj.SC_ID,
          sC_U_ID: tableSetting.clickRowObj.SC_U_ID,
          sC_Order: formData.order,
          sC_ShortCutName: formData.name,
          sC_ShortCutColor: formData.iconColor,
          sC_BackgroundIcon: formData.iconName,
          sC_Remark: formData.remark,
          sC_RoutePath: formData.path
        };
        proxy.$vueAxios.put("Master_Base_ShortCut", params).then((res: any) => {
          getData();
          modalSetting.visible = false;
        });
      }
    }
  });
};
onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
.desktopShortcut {
  height: 100%;
  :deep(.el-dialog__body) {
    height: 350px;
  }
}
</style>
